<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>系统管理员</title>
		<script src="./vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<style>
			ul li {
				border: 1px solid gold;
			}

			ul li span {
				border-right: 3px outset blueviolet;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<p>
				<input type="number" min="1" v-model="pageNo" placeholder="页号" />
				<input type="number" min="1" v-model="pageSize" placeholder="页大小" />
				<input type="text" v-model="aname" placeholder="登录名" />
				<input type="button" value="搜索" @click="doSearch()" />
			</p>
			<ul type="none">
				<li v-for="item in page.records">
					<span>{{item.aname}}</span><span>{{item.realname}}</span>
					<span>{{item.phone}}</span>
					<span v-html="item.password"></span>
				</li>
			</ul>
			<p align="center">
				当前总页数是{{page.pages}},总条数:{{page.total}},当前页{{page.current}}
			</p>
		</div>
		<script>
		axios.interceptors.request.use(function(config) {
			config.headers['token']="laoliu"+new Date().toGMTString();
			console.log('前置');
			return config;
		}, function(err) {
			alert("错误"+err);
			return Promise.reject("error");
		});
		axios.interceptors.response.use(function(response){
			//console.log(res+">??????????");
			console.log("sss:"+JSON.stringify(response));
			return response.data;
		}, function(err) {
			alert("错误"+err);
			return Promise.reject("error");
		});
			var vm = new Vue({
				el: '#app',
				data: {
					page: {},
					pageNo: 1,
					pageSize: 10,
					aname: null
				},
				mounted() {
					this.load();
				},
				//监听这三个属性的变化
				// watch: {
				// 	pageSize(newV, oldV) {
				// 		console.log("页大小从" + oldV + "变成了" + newV);
				// 		this.load();
				// 		// let L=this.load;
				// 		// window.setTimeout(function(){
				// 		// 	L();
				// 		// },1000);

				// 	}
				// },

				methods: {
					load() {
		
						axios.get("http://localhost:8886/admin/search", {
							params: {
								pageNo: this.pageNo,
								pageSize: this.pageSize,
								aname: this.aname,
							},
							headers: {

							}
						}).then(res => {
							console.log("loading....."+res); //res.data是ajax返回的数据。。。
							this.page =res;//res.data;

						}).catch(err => {
							console.log("catch");
							alert("error:" + err);
						});
					},
					doSearch() {
						this.load();
					}
				}
			})
		</script>
	</body>
</html>
